import QtQuick 1.0
import com.nokia.symbian 1.0

Item {
    id: ingredientSelectDialog
    width: 320
    height: 500

    signal ingredientSelected(int index)

    FocusScope {
        id: focusscope1
        x: 20
        width: 280
        height: 40
        anchors.top: parent.top
        anchors.topMargin: 6
        anchors.horizontalCenter: parent.horizontalCenter

        Rectangle {
            id: rectangle2
            anchors.fill: parent
            color: "#00000000"
            radius: 15
            border.width: 3
            border.color: "#5582e2"

            Image {
                id: searchBtn
                x: 244
                y: 4
                width: 32
                height: 32
                clip: true
                smooth: true
                source: "qrc:/Resource/button_search.png"
            }

            Text {
                id: placeHolderText
                anchors.fill: searchTextInput
                text: "Enter your search text"
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 22
                visible: ("" == searchTextInput.text) && (!searchTextInput.focus)
            }

            TextInput {
                id: searchTextInput
                y: 5
                height: 30
                text: ""
                font.bold: false
                clip: true
                cursorVisible: true
                smooth: true
                horizontalAlignment: TextInput.AlignLeft
                anchors.left: parent.left
                anchors.leftMargin: 10
                anchors.right: searchBtn.left
                anchors.rightMargin: 3
                font.pixelSize: 22

                onTextChanged: {
                    console.debug("Search model to find the exsit one")
                    // Add auto completer
                }
            }
        }
    }

    Component {
        id: listHeader

        ListHeading {
            id: listHeading

            ListItemText {
                id: headingText
                anchors.fill: listHeading.paddingItem
                role: "Heading"
                text: "Ingredient"
            }
        }
    }

    Component {
        id: ingredientListItemDelegate
        Rectangle {
            id: listItem
            width: ingredientListView.width
            height: 60
            color: "gray"

            Text {
                anchors.left: parent.left
                anchors.leftMargin: 2
                anchors.top: parent.top
                anchors.topMargin: 2
                color: "white"
                font.pointSize: 16
                text: ListView.view.model[index].name
            }

            Rectangle {
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                height: 1
                color: "white"
            }


            PropertyAnimation {
                id: clickAnim
                target: listItem
                property: "color"
                from: "steelblue"
                to: "gray"
                duration: 100

                onCompleted: {
                    ingredientSelectDialog.destroy()
                }
            }

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    clickAnim.start()
                    ingredientSelected(index)
                }
            }
        }
    }

    ListView {
        id: ingredientListView
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.top: focusscope1.bottom
        anchors.topMargin: 10
        clip: true
        model: ingredientSelectmodel
        delegate: ingredientListItemDelegate
        header: listHeader
    }
}
